
import React,{useEffect, useRef} from 'react'
import E from 'wangeditor'
import Cloud from 'leancloud-storage';
const getBase64 = (img, callback) => { //将图片资源对象转换为base64编码
  const reader = new FileReader();  //MDN
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
};

export default function RichEditor(props) {
  const editorRef = useRef()
  useEffect(()=>{
    console.log('创建富文本编辑器');
    let editor = new E(editorRef.current) //定义富文本对象
    // 默认情况下，显示所有菜单
    editor.config.menus = [  
      'undo',
      'redo',
      'head',
      'bold',
      'fontSize',
      'fontName',
      'italic',
      'underline',
      'strikeThrough',
      'indent',
      'lineHeight',
      'foreColor',
      'backColor',
      'link',
      'list',
      'todo',
      'justify',
      'quote',
      'emoticon',
      'image',
      // 'video',
      // 'table',
      // 'code',
      'splitLine'
      
    ]
    editor.config.onblur = function (newHtml) { //富文本编辑器失焦事件
        // console.log('onblur', newHtml) // 获取最新的 html 内容
        props.onChange(newHtml) //将富文本内容交给表单
    }
    editor.config.customUploadImg = function (resultFiles, insertImgFn) { //自定义图片上传
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
        console.log(resultFiles);
        getBase64(resultFiles[0],(base64)=>{
          let file = new Cloud.File('article-detail.png',{base64})  //构建LeanCloud资源对象
          file.save().then(res=>{  //向LeanCloud云端提交资源
            // console.log(res);
            let {url} = res.attributes  //后端下发的在线图片路径
            // 上传图片，返回结果，将图片插入到编辑器中
            insertImgFn(url)
          })
          
        })
        
    }
    editor.create()  //创建富文本结构
    return ()=>{ //清除useEffct副作用
      console.log('清除useEffct副作用');
      editor.destroy()   
    }
  },[])
  return (
    <div ref={editorRef}>
      {/* 呈现富文本编辑器 */}
    </div>
  )
}
